<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="小枫">
	<title><%= message %></title>
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
	<style>
		:root {
			--primary: #7266ee;
			--error: #ff4757;
			--text: #2d3436;
			--bg: #f8f9fa;
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: 'Segoe UI', system-ui, sans-serif;
		}

		body {
			min-height: 100vh;
			background: var(--bg);
			display: flex;
			flex-direction: column;
			align-items: center;
			background-image:
				radial-gradient(circle at 10% 10%, rgba(114, 102, 238, 0.1) 0%, transparent 50%),
				radial-gradient(circle at 90% 90%, rgba(255, 71, 87, 0.1) 0%, transparent 50%);
			animation: gradient 15s ease infinite;
		}

		.error-container {
			margin: auto;
			padding: 2rem;
			text-align: center;
			transform: translateY(-10%);
		}

		.error-code {
			font-size: 8rem;
			font-weight: 800;
			background: linear-gradient(45deg, var(--error), var(--primary));
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			line-height: 1;
			margin-bottom: 1rem;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
			position: relative;
			animation: float 3s ease-in-out infinite;
		}

		.error-message {
			font-size: 1.5rem;
			color: var(--text);
			margin: 1rem 0 2rem;
			max-width: 600px;
			line-height: 1.6;
			opacity: 0.9;
		}

		.action-btn {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			padding: 0.8rem 2rem;
			border-radius: 50px;
			background: var(--primary);
			color: white !important;
			text-decoration: none;
			transition: all 0.3s ease;
			box-shadow: 0 4px 6px rgba(114, 102, 238, 0.2);
			position: relative;
			overflow: hidden;
		}

		.action-btn::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
			transition: 0.5s;
		}

		.action-btn:hover::before {
			left: 100%;
		}

		.action-btn:hover {
			transform: translateY(-2px);
			box-shadow: 0 6px 12px rgba(114, 102, 238, 0.3);
		}

		.action-btn:active {
			transform: translateY(0);
		}

		.error-wave {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100px;
			background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' fill-opacity='0.9' d='M0,160L48,149.3C96,139,192,117,288,128C384,139,480,181,576,192C672,203,768,181,864,165.3C960,149,1056,139,1152,149.3C1248,160,1344,192,1392,208L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'/%3E%3C/svg%3E");
			background-size: cover;
		}

		@keyframes float {

			0%,
			100% {
				transform: translateY(0);
			}

			50% {
				transform: translateY(-10px);
			}
		}

		@keyframes gradient {
			0% {
				background-position: 0% 0%;
			}

			50% {
				background-position: 100% 100%;
			}

			100% {
				background-position: 0% 0%;
			}
		}

		@media (max-width: 768px) {
			.error-code {
				font-size: 5rem;
			}

			.error-message {
				font-size: 1.2rem;
				padding: 0 1rem;
			}

			.action-btn {
				padding: 0.6rem 1.5rem;
			}
		}
	</style>
</head>

<body>
	<div class="error-container">
		<% if (error.status) { %>
		<div class="error-code"><%= error.status %></div>
		<% } else { %>
		<div class="error-code">500</div>
		<% } %>
		<h1 class="error-message"><%= message %></h1>
		<a href="/" class="action-btn" rel="noopener noreferrer">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
				<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
				<polyline points="9 22 9 12 15 12 15 22"></polyline>
			</svg>
			返回首页
		</a>
	</div>
	<div class="error-wave"></div>
</body>

</html>